<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 具体页面结构 -->
      <!--头部-->
      <PageTools>
        <template #left>
          <span>总纪录条:{{ total }}</span>
        </template>
        <template #right>
          <el-button
            v-allow="'import'"
            type="warning"
            @click="$router.push('/import')"
          >excel导入</el-button>
          <el-button
            v-allow="'export'"
            type="danger"
            @click="hExportExcel"
          >excel导出</el-button>
          <el-button type="primary" @click="doAdd">新增员工</el-button>
        </template>
      </PageTools>
      <!--table主体部分-->
      <el-card>
        <el-table border :data="list">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template v-slot="scope">
              <!--额外的封装组件-->
              <!-- <img
                :src="scope.row.staffPhoto"
                alt=""
                width="100px"
              > -->
              <ImageHolder
                :src="scope.row.staffPhoto"
              />
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" sortable />
          <el-table-column label="聘用形式">
            <template v-slot="scope">
              {{ formatType(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable />
          <el-table-column label="操作" width="280">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="$router.push('/employees/detail?id='+scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="hAssignRole(scope.row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click.native="delEmp(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页部分-->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="pageData.page"
            :page-sizes="[3, 5, 7, 9]"
            :page-size="pageData.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
      </el-card>
      <!--对话框-->
      <el-dialog
        v-if="showDialog"
        title="新增员工"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <addor-edit
          @close="doClose"
          @success="hSuccess"
        />
      </el-dialog>
      <!--分配角色的对话框-->
      <el-dialog
        v-if="showDialogRole"
        :visible.sync="showDialogRole"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <assign-role
          :cur-employee-id="curId"
          @close="showDialogRole=false"
          @success="hSuccessRoule"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入组件
import AssignRole from './assignRole'
// 导入子组件
import addorEdit from '@/views/employees/empDialog.vue'
// 导入接口信息
import { getEmployess, delEmployee } from '@/api/employees'
// 枚举
import EmloyeENUM from '@/constant/employees'
// 进阶格式化,优化代码
const EMPLOYTYPE = EmloyeENUM.hireType.reduce((acc, cur) => { acc[cur.id] = cur.value; return acc }, {})
export default {
  // 使用子组件
  components: {
    'addor-edit': addorEdit,
    AssignRole // 注册组件
  },
  // 1.数据
  data() {
    return {
      // page,pagesize的对象,页码对象
      pageData: {
        page: 1,
        size: 3
      },
      // 员工信息列表
      list: [],
      // 总条数
      total: 0,
      // 对话框的显示,隐藏
      showDialog: false,
      // 分配角色的对话框
      showDialogRole: false,
      // 父传子的id
      curId: ''
    }
  },
  // 2.created钩子
  created() {
    // ---------------------------获取员工信息列表,调用封装函数
    this.loadEmployess()
  },
  // 3.方法
  methods: {
    // --------------------------------父组件知道自组件保存角色信息成功
    hSuccessRoule() {
      // 关闭角色对话框
      this.showDialogRole = false
      this.loadEmployess()
    },
    // 点击分配角色按钮,
    hAssignRole(id) {
      // 打开角色对话框
      this.showDialogRole = true
      // 传递数据
      this.curId = id
    },
    TransformData(list) {
      const mapInfo = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      // list : [{
      // id : '604gsvdyuqw',mobile : '156945854856'
      // },
      // {id : '604gsvdyuqd',mobile : '156945854s56'}]
      const header = Object.keys(list[0]).map(zhKeys => {
        return mapInfo[zhKeys]
      }) // ['编号', "手机号"]
      const headhr = Object.keys(list[0]) // ['id','mobile']
      // const data = list.map(item => {
      //   // // 把  item['formOfEmployment']: 1 , 2   ---> '正式'， '非正式'
      //   return header.map(key => {
      //     return item[key]
      //   })
      //   // return Object.values(item)
      // })
      // data把list中每一个对象转成 对应的value数组
      const data = list.map(item => {
        // 把  Obj['formOfEmployment']: 1 , 2   ---> '正式'， '非正式'
        // const key = obj['formOfEmployment'] // 1, 2
        // obj['formOfEmployment'] = EmloyeENUM.hireType[key] // hireTypEnmu:{1:'正式', '2':'非正式' }
        // return Object.values(obj)
        return headhr.map(key => {
          // 如果属性是聘用形式,{1:'正式' 2:'非正式'}
          if (key === 'formOfEmployment') {
            return this.formatType(item[key])
          } else {
            return item[key]
          }
        })
      })

      /** [
       * ['01',"15684545654"]
       * ["02","156595856995"]
       * ] */
      return { header, data, headhr }
    },
    hExportExcel() {
    // 导出数据为excel文件
      import ('@/vendor/Export2Excel').then(async excel => {
        // 发送ajax请求,拿到导出的数据,之后进行转换
        const res = await getEmployess(this.pageData)
        // console.log(res)
        const list = res.data.rows
        // console.log('从后端获取的数据', list)
        const { header, data } = this.TransformData(list)
        // excel表示导入的模块对象
        // console.log(header, data)
        excel.export_json_to_excel({
          header, // 表头,必填
          data, // 具体数据,必填
          filename: '员工信息列表', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // -----------------------------父组件知道子组件新增成功
    hSuccess() {
      // 关闭对话框
      this.showDialog = false
      // 解决新增时的bug,页码不跳转
      this.total++
      // 跳转到新增时的页码
      this.pageData.page = Math.ceil((this.total) / this.pageData.size)
      // 清空表单
      // this.$refs.addFormRef.formData = {
      //   username: '', // 用户名
      //   mobile: '', // 手机号
      //   formOfEmployment: '', // 聘用形式
      //   workNumber: '', // 工号
      //   departmentName: '', // 部门
      //   timeOfEntry: '', // 入职时间
      //   correctionTime: '' // 转正时间
      // }
      // this.$refs.addFormRef.resetFields()
      // 重新渲染
      this.loadEmployess()
    },
    // ----------------点击新增按钮
    doAdd() {
      // 打开模态框
      this.showDialog = true
    },
    // --------------子传父,取消对话框
    doClose() {
      // 关闭对话框
      this.showDialog = false
      // 清空表单
      // this.$refs.addFormRef.formData = {
      //   username: '', // 用户名
      //   mobile: '', // 手机号
      //   formOfEmployment: '', // 聘用形式
      //   workNumber: '', // 工号
      //   departmentName: '', // 部门
      //   timeOfEntry: '', // 入职时间
      //   correctionTime: '' // 转正时间
      // }
      // this.$refs.addFormRef.resetFields()
    },
    // ---------------------------封装获取员工信息列表
    async loadEmployess() {
      const res = await getEmployess(this.pageData)
      // console.log(res)
      if (res.code === 10000) {
        // 成功
        this.$message.success(res.message)
        // 将数据绑定到data中
        this.list = res.data.rows
        this.total = res.data.total
      } else {
        this.$message.error(res.message)
      }
    },
    // ---------------------用户点击的页码
    handleCurrentChange(pageVal) {
      // console.log(`当前页: ${pageVal}`)
      // 点击的val页码数,跳转到页码val,更新页码
      this.pageData.page = pageVal
      // 重新加载员工信息列表
      this.loadEmployess()
    },
    // -------------每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      // 用户修改页码的条数
      this.pageData.size = val
      // 自动让页码跳转到底一页
      this.pageData.page = 1
      // 重新加载员工信息列表
      this.loadEmployess()
    },
    // ---------------------封装一个格式化的函数,
    // 1 : 正   2: 非正 else: 其他
    formatType(typeId) {
      // const item = EmloyeENUM.hireType.find(item => item.id === typeId)
      // if (item) {
      //   return item.value
      // } else {
      //   return '未知'
      // }
      return EMPLOYTYPE[typeId] || '未知'
    },
    // ----------------------点击删除按钮,实现删除功能
    delEmp(id) {
      this.$confirm('你确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // // 显示删除成功信息
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
          // 获取删除数据
          const res = await delEmployee(id)
          // console.log(res)
          if (res.code === 10000) {
            // 成功,删除成功
            this.$message.success(res.message)
            // total总条数除以size余1时,删除让page--
            if (this.total % this.pageData.size === 1) {
              this.pageData.page--
            }
            // 如果删除是最后一条数据,就页面要减1
            // if (this.list.length === 1) {
            //   let page = this.pageData.page
            //   page--
            //   // 页码不能减为0,
            //   // if(this.pageData.page === 0) {
            //   //   this.pageData.page = 1
            //   // }
            //   page = Math.max(1, page)
            //   this.pageData.page = page
            // }
            // 刷新页面数据
            this.loadEmployess()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          // 删除失败信息
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
